<template>
  <a-modal
    v-model="show"
    title="填写手机联系人"
    @ok="handleOk"
    width="600px"
    @cancel="hideContact"
    :maskClosable="false">
    <a-form-model
      ref="form"
      :model="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 12 }"
      :rules="rules"
    >
      <a-form-model-item label="标签名字" prop="labelName">
        <a-input v-model="form.labelName" placeholder="请输入名称"/>
      </a-form-model-item>
      <a-form-model-item label="标签颜色" >
        <a-select default-value="red" style="width: 180px" v-model="form.labelColor">
          <a-select-option value="red">
            红色
          </a-select-option>
          <a-select-option value="green">
            绿色
          </a-select-option>
          <a-select-option value="blue">
            蓝色
          </a-select-option>
          <a-select-option value="orange">
            橙色
          </a-select-option>
          <a-select-option value="gray">
            灰色
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否预设">
        <a-switch checked-children="开" un-checked-children="关" v-model="form.ifPreinstall"/>
      </a-form-model-item>
      <a-form-model-item label="所属科室" v-if="!form.ifPreinstall">
        <a-select default-value="办公室" style="width: 180px" v-model="form.labelDepartName">
          <a-select-option value="办公室">
            办公室
          </a-select-option>
          <a-select-option value="经济运行科">
            经济运行科
          </a-select-option>
          <a-select-option value="产业转型科">
            产业转型科
          </a-select-option>
          <a-select-option value="数字经济与信息化科">
            数字经济与信息化科
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="备注">
        <a-textarea
          v-model="form.description"
          placeholder="请填写备注"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item>

    </a-form-model>
  </a-modal>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import { insertLabel, getLabel, updateLabel } from '@/api/serve';
export default {
  name: 'AddTags',
  props: {
    visible: Boolean,
    updateId: [String, Number]
  },
   data() {
    return {
      show: false,
      form: {
        labelName: '',
        ifPreinstall: false,
        description: '',
        labelDepartName: '办公室',
        labelColor: 'red'

      },
      rules: {
        labelName: [
          { required: true, message: '请输入标签名', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleOk() {
       this.$refs.form.validate(valid => {
        if (valid) {
          if (this.updateId) {
            this.updateLabel();
          } else {
            this.insertLabel();
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    updateLabel() {
      updateLabel({
         ...this.form,
        mobile: this.userInfo.mobileNum,
        ifPreinstall: this.form.ifPreinstall ? 0 : 1,
        updateUserName: this.userInfo.aliasName,
        id: this.updateId
      }).then(res => {
        this.$message.success('修改成功！', 3);
        this.hideContact();
      });
    },
    insertLabel() {
      insertLabel({
        ...this.form,
        mobile: this.userInfo.mobileNum,
        ifPreinstall: this.form.ifPreinstall ? 0 : 1,
        createUserName: this.userInfo.aliasName
      }).then(res => {
        this.$message.success('添加成功！', 3);
        this.hideContact();
      });
    },
    hideContact() {
      this.$emit('close');
      this.show = false;
    },
    getLabel() {
      getLabel({
        id: this.updateId
      }).then(res => {
        // console.log(res.data);
        this.form = {
          labelName: res.data.labelName,
          ifPreinstall: !res.data.ifPreinstall,
          description: res.data.description,
          labelDepartName: res.data.labelDepartName
        };
      });
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        this.show = this.visible;
        if (this.updateId) {
          this.getLabel();
        }
      } else {
        this.show = false;
      }
    }
  },
  created() {
    this.form.labelDepartName = this.userPermissions.organization;
  },
  computed: {
    ...mapGetters(['userInfo']),
    ...mapState({
      userPermissions: state => state.user.userPermissions
    })
  }
};
</script>

<style scoped lang="less">

</style>
